import React, { Component } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Alert,
  StatusBar,
} from "react-native";
import MCV from "./MCV";
export default class DiaryWriter extends Component {
  constructor(props) {
    super(props);
    (this.diaryTitle = null), (this.diaryBody = null), (this.moodCode = 0);
    this.state = {
      moodText: "请选择心情",
    };
  }
  returnPressed() {
    Alert.alert("请确认", "你确定要返回列表页么?", [
      { text: "确定", onPress: this.props.returnPressed },
      { text: "取消" },
    ]);
  }
  selectMood() {
    let tempString;
    if (this.moodCode === 5) this.moodCode = 1;
    else this.moodCode++;
    switch (this.moodCode) {
      case 1:
        tempString = "现在很平静";
        break;
      case 2:
        tempString = "现在很开心";
        break;
      case 3:
        tempString = "现在很悲伤";
        break;
      case 4:
        tempString = "现在很愤怒";
        break;
      case 5:
        tempString = "现在很痛苦";
        break;
      default:
        break;
    }
    this.setState(() => {
      return { moodText: tempString };
    });
  }
  render() {
    return (
      <View style={MCV.container}>
        <StatusBar hidden={true} />
        <View style={MCV.firstRow}>
          <TouchableOpacity onPress={this.returnPressed.bind(this)}>
            <Text style={MCV.smallButton}>返回</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.selectMood.bind(this)}>
            <Text style={MCV.longButton}>{this.state.moodText}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() =>
              this.props.saveDiary(
                this.moodCode,
                this.diaryBody,
                this.diaryTitle
              )
            }
          >
            <Text style={MCV.smallButton}>保存</Text>
          </TouchableOpacity>
        </View>
        <TextInput
          style={MCV.titleInputStyle}
          placeholder={"写个日记标题吧"}
          onChangeText={(text) => {
            this.diaryTitle = text;
          }}
        ></TextInput>
        <TextInput
          style={MCV.diaryBodyStyle}
          multiline={true}
          placeholder={"日记正文请在次输入..."}
          onChangeText={(text) => {
            this.diaryBody = text;
          }}
        ></TextInput>
      </View>
    );
  }
}
